<template>
  <div>
    <el-radio-group v-model="tabPosition" @change="tabChange">
        <el-radio-button label="fireStation">消防站</el-radio-button>
      <el-radio-button label="wxxfz">微型消防站</el-radio-button>
      <el-radio-button label="rescueStation">医疗救援站</el-radio-button>
    </el-radio-group>
    <div class="componentSectionBottom">
      <div class="componentSectionBottomTableTop">
        <table>
          <col width="40%" />
          <col width="20%" />
          <col width="40%" />
          <tr>
            <th>服务站</th>
            <th>地址</th>
            <th>电话</th>
          </tr>
        </table>
      </div>
      <div
        class="componentSectionBottomTableMiddle"
        style="height: 0.010417rem; /* 2/192 */"
      >
        <el-scrollbar style="height: 100%;">
          <table v-if="dataList.length">
            <col width="40%" />
            <col width="20%" />
            <col width="40%" />
            <tbody>
              <tr v-for="(item, index) in dataList" :key="item.id + index">
                <template v-if="tabPosition=='fireStation'">
                  <td>{{ item.name }}</td>
                  <td>{{ item.address }}</td>
                  <td>{{ item.phone }}</td>
                </template>
                <template v-if="tabPosition=='wxxfz'">
                  <td>{{ item.jg_dw }}</td>
                  <td>{{ item.jg_jtwz }}</td>
                  <td>{{ item.phone }}</td>
                </template>
                <template v-if="tabPosition=='rescueStation'">
                  <td>{{ item.supervision_unit }}</td>
                  <td>{{ item.supervision_unit_address }}</td>
                  <td>{{ item.phone }}</td>
                </template>
              </tr>
            </tbody>
          </table>
          <div style="text-align: center;" v-else>暂无数据</div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["coordinate"],
  data() {
    return {
      dataList: [],
      tabPosition: "fireStation",
      recentRescueData: "",
    };
  },
  created() {
    this.$api
      .post("/unit/PublicShow/recentRescue", {
        longitude: this.coordinate.longitude,
        latitude: this.coordinate.latitude,
        num: 3,
      })
      .then((res) => {
        this.recentRescueData = res.data;
        this.tabChange(this.tabPosition);
      });
  },
  methods: {
    tabChange(e) {
      this.dataList = this.recentRescueData[e];
      console.log(this.dataList);
    },
  },
};
</script>

<style lang="scss" scoped>
.componentSectionBottom {
    height: 20vh;
    padding: 0.5%;
    display: flex;
    flex-direction: column;
    color: #fff;
    .componentSectionBottomTableTop {
        padding: 0.5% 0;
        font-size: 0.09375rem;
        font-weight: 400;
        table {
            cursor: default;
            width: 100%;
            text-align: center;
            background-color: rgb(39, 104, 136, 0.83);
        }
    }
    .componentSectionBottomTableMiddle {
        flex-grow: 1;
        margin-bottom: 0.3%;
        table {
            width: 100%;
            text-align: center;
            border-collapse: collapse;
            font-size: 0.083333rem;
            font-weight: 400;
            tr {
                cursor: pointer;
                td {
                    padding: 0.5% 0;
                }
                &:nth-child(even) {
                    background-color: rgb(39, 104, 136, 0.3);
                }
                &:hover {
                    background: rgba(37, 132, 255, 0.73);
                }
            }
        }
    }
}
</style>
